<template>
  <div>
  
    <el-button type="primary" style="margin:10px 0;">添加SPU</el-button>
    <el-table border style="width: 100%; margin:20px 0" :data="SpuList">
      <el-table-column type="index" label="序号" width="100" align="center" />
      <el-table-column prop="spuName" label="spu名称" width="160" align="center" />
      <el-table-column prop="description" label="spu描述" align="center" />
      <el-table-column prop="address" label="操作" align="center">
  
      <template v-slot="{row}">
        <el-button title="添加SKU" type="primary" :icon="Plus" size="small"></el-button>
        <el-button title="修改SPU" type="primary" :icon="Edit" size="small"></el-button>
        <el-button title="查看SKU" type="info" :icon="InfoFilled" size="small"></el-button>
        <el-button title="删除SPU" type="danger" :icon="Delete "  size="small"></el-button>
      </template>
  
      </el-table-column>
    </el-table>
    <!-- 分页器
   -->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 5, 8, 10, 15]"
      :small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper,->, sizes, total,"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  </div>
</template>

<script lang="ts">
  export default {
    name:'SpuList'
  }
</script>
<script lang="ts" setup>
import { Plus, Edit, Delete, InfoFilled } from '@element-plus/icons-vue';
import { reqGetSpuListData } from '@/api/product/spu'

import { ref,watch } from 'vue'
import { useCategorySelectorStore } from "@/stores/categorySelector"
const Selector = useCategorySelectorStore()
const currentPage = ref(1)
const pageSize = ref(3)
const total = ref<number>(0)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const loading = ref(true);
//用于存储spuList的数据
const SpuList=ref([])
//改变每页的的数据的数量
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`)
  pageSize.value = val;
  currentPage.value = 1
}
//改变当前的页码
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
}

//1获取spuList数据的方法
const getSpuListData = async() => {
  const result = await reqGetSpuListData(
    currentPage.value,
    pageSize.value,
Selector.category3Id as number
  
  )
  console.log(result)
  SpuList.value = result.records
  total.value = result.total as number
  
}
watch(() => Selector.category3Id, (category3Id) => {
  if (!category3Id) {
    SpuList.value = [];
    return 
  }
getSpuListData()
  
},{immediate:true})

</script>

<style lang="scss" scoped>

</style>